<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="#"><a href=".">首页</a></div></a>
      </p>
      
      <div class="sn-quick-menu">
       <div class="login"><a href="login.html">登录</a></div>
        <div class="sp-cart"><a href="shopcart.html">购物车</a></div>
        <div class="address"><a href="address.html">个人收货地址</a></div>
        <div class="myorders"><a href="myorders.html">所有订单</a></div>
        <div class="users"><a href="users.html">个人信息</a></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="#" title="潮流男鞋">
            <img src="/file/logo.jpg">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base datails-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="commodity.html" class="active">所有商品</a>
            <a href="buytoday.html">今日团购</a>
            <!-- <a href="information.html">母婴资讯</a> -->
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="data-cont-wrap w1200">
      <div class="crumb">
        <a href="javascript:;">首页</a>
        <span>></span>
        <a href="javascript:;">所有商品</a>
        <span>></span>
        <a href="javascript:;">产品详情</a>
      </div>
      <div class="product-intro layui-clear">
        <div class="preview-wrap">
          <a href="javascript:;"><img id="url" src="../res/static/img/details_img1.jpg"></a>
        </div>
        <div class="itemInfo-wrap">
          <div class="itemInfo">
            <div class="title">
              <h4 id="title">男女宝宝秋冬装套装0一1岁婴儿衣服潮加厚连体衣保暖冬季外出抱衣 </h4>
              <span><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>
            </div>
            <div class="summary">
              <p class="reference"><span>参考价</span> <del id="refer" >￥280.00</del></p>
              <p class="activity"><span>活动价</span><strong class="price" id="unitPrice"><i>￥</i>99.00</strong></p>
              <p class="address-box"><span>送&nbsp;&nbsp;&nbsp;&nbsp;至</span><strong class="address">江西&nbsp;&nbsp;南昌&nbsp;&nbsp;东湖区</strong></p>
            </div>
            <div class="choose-attrs">
              <div class="color layui-clear"><span class="title">颜&nbsp;&nbsp;&nbsp;&nbsp;色</span> <div class="color-cont"><span class="btn">白色</span> <span class="btn active">粉丝</span></div></div>
               <div class="color layui-clear"><span class="title">库&nbsp;&nbsp;&nbsp;&nbsp;存</span><span  id="stock">999</span> </div>
              <div class="number layui-clear"><span class="title">数&nbsp;&nbsp;&nbsp;&nbsp;量</span><div class="number-cont"><span class="cut btn">-</span><input id="num" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="4" type="" name="" value="1"><span class="add btn">+</span></div></div>
            </div>
            <div class="choose-btns">
              <button class="layui-btn layui-btn-primary purchase-btn">立刻购买</button>
              <button class="layui-btn  layui-btn-danger car-btn" onclick="toCart()"><i class="layui-icon layui-icon-cart-simple"></i>加入购物车</button>  
            </div>
          </div>
        </div>
      </div>
      <div class="layui-clear">
        <div class="aside">
          <h4>热销推荐</h4>
          <div class="item-list">
            <div class="item">
              <img src="/file/2.jpg">
              <p><span>安踏创2.0 pro丨缓震训练跑步鞋男</span><span class="pric">￥188.00</span></p>
            </div>
            <div class="item">
              <img src="/file/3.jpg">
              <p><span>李宁䨻beng超轻19跑步鞋男</span><span class="pric">￥343.00</span></p>
            </div>
            <div class="item">
              <img src="/file/5.jpg">
              <p><span>【安踏】星岚男子氮速科技跑鞋 </span><span class="pric">￥315.00</span></p>
            </div>
            <div class="item">
              <img src="/file/6.jpg">
              <p><span>李宁䨻beng科技跑步鞋男</span><span class="pric">￥189.00</span></p>
            </div>
          </div>
        </div>
        <div class="detail">
          <h4>详情</h4>
          <div class="item" id="xq">
           <img src="/file/1-1.jpg">
           
          </div>
        </div>
      </div>
    </div>
  </div>
  
<script type="text/javascript">

//添加到购物车
function toCart(){

	  layui.use('jquery',function(){
		var $ = layui.jquery;
		
		//获得id
		var pid = getUrlParam('id');
		//获得数量
		var num = $("#num").val();
		//console.log("pid:"+pid+",num:"+num)
		$.post(
			"../../shopcart/add.do",
			{
				pid:pid,//购买的商品
				num:num,//购买的数量
				uid:2//谁买的，因为现在还没登录，所有先写个固定值
			},function(res){
				console.log(res)
				layer.msg("已添加到购物车！")
			}
		)
	});
}


//获取url中的参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}  

  layui.config({
    base: '../res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','jquery','layer'],function(){
      var mm = layui.mm,$ = layui.$,layer=layui.layer;
      
      var n=0;//用来存储库存
      
      //获取首页传过来的值
      var id=getUrlParam('id');
      var title=$("#title");
      var unitPrice = $("#unitPrice");
   	  var refer = $("#refer");
   	  var url = $("#url");
   	  var stock = $("#stock");
      //console.log(id); 
     // layer.msg(id)
      //加载详情数据
      $.post(
    		 "../../product/findById.do?id="+id,
    		 function(res) {
				//console.log(res)
    		    title.html(res.pname);
    	    	unitPrice.html("<i>￥</i>"+res.unitPrice);
    	    	refer.html(res.unitPrice*2);
    	    	url.attr("src","/file/"+res.url);
    	    	stock.html(res.stock);
    	    	n=res.stock;
			},"json"
      
      )
      
      
      var cur = $('.number-cont input').val();
      $('.number-cont .btn').on('click',function(){
        if($(this).hasClass('add')){
        	if (cur<n) {//数量小于或等于库存
        		cur++;
			} else {
				layer.msg("库存不足！！")

			}
        	
          
         
        }else{
          if(cur > 1){
            cur--;
          }  
        }
        $('.number-cont input').val(cur)
      })
      
  });
</script>


</body>
</html>